div.viewpointsContainer

    div.viewpointsNotice(
        layout="column"
        layout-align="center center"
        ng-if="vm.loading")
        h3 Loading viewpoints...

    md-container.viewpointsList(
        ng-show="vm.toShow === 'views'"
        flex="100"
        layout="column")

        div.viewpoint(
            layout="row"
            ng-if="vm.viewpoints.length > 0"
            ng-click="vm.selectView(viewpoint)"
            style="background-color: {{viewpoint.selected ? 'rgba(186, 197, 225, 0.20)' : 'initial'}};"
            ng-repeat="viewpoint in vm.viewpointsToShow track by $index")

            div.viewpointMain(layout="row")
                img.viewpointThumbnail(ng-src="{{viewpoint.screenshot.thumbnailUrl}}" alt="")
                div(flex, layout="column" layout-align="start")
                    div(
                        ng-if="vm.editSelectedView._id !== viewpoint._id").viewpointName {{viewpoint.name || "(Unnamed View)"}}
                    label(style="visibility:hidden") Viewpoint Name
                    textarea.viewpointName(
                        ng-model="vm.editSelectedView.name"
                        maxlength="{{vm.viewpointNameMaxlength}}"
                        ng-if="vm.editSelectedView._id === viewpoint._id"
                        title="Viewpoint Name")

            div.viewpointEnterHolder(
                ng-click="vm.editView(viewpoint)"
                ng-if="viewpoint.selected === true && vm.editSelectedView._id !== viewpoint._id && vm.canAddView"
                layout="row"
                layout-align="center center")

                md-icon(class="angular-material-icons material-icons" role="img" aria-label="edit") edit

            div.viewpointEnterHolder(
                ng-if="viewpoint.selected === true && vm.editSelectedView._id === viewpoint._id"
                layout="column"
                layout-align="center center")

                md-icon(
                        ng-click="vm.resetEditState()"
                        class="angular-material-icons material-icons"
                        role="img"
                        aria-label="cancel"
                ) cancel

                md-icon(
                        ng-click="vm.saveEditedView(viewpoint)"
                        class="angular-material-icons material-icons"
                        role="img"
                        aria-label="save"
                ) save

            div.viewpointEnterSpace(
                ng-if="viewpoint.selected !== true"
                layout="row"
                layout-align="center center")

        .cardInfo(
            ng-if="vm.viewpoints.length === 0 && !vm.loading"
            )

            p No viewpoints have been created yet

    div.viewpointContainer(
        layout="column"
        layout-margin
        ng-show="vm.toShow === 'view'")

        div(layout="row" flex).viewpointMarginBottom
            div.openedViewColorBar(style="background-color: {{vm.getViewRGBAColor(vm.selectedView)}};")
            div(layout="column" flex)
                md-input-container
                    label(for="viewpointName") View Name
                    input#viewpointName(
                        type="text"
                        ng-required
                        ng-disabled="!vm.canAddView"
                        ng-model="vm.newView.name"
                        maxlength="{{vm.viewpointNameMaxlength}}")


    div.addHolder(layout="row" flex="100")

        div(flex="50" layout="row" layout-align="start center")
            button(class="md-icon-button md-button md-ink-ripple"
                type="button"
                ng-if="vm.viewpoints.length > 0"
                aria-label="Delete"
                ng-show="vm.toShow === 'views'"
                ng-click="vm.deleteViewpoint()")
                md-icon(
                    class="angular-material-icons ng-scope material-icons"
                    role="img"
                    aria-hidden="true") delete

        div(flex="50" layout="row" layout-align="end center")
            button(class="md-accent md-fab md-mini md-button md-ink-ripple"
                type="button"
                aria-label="Add"
                ng-show="vm.toShow === 'views'"
                ng-disabled="vm.addViewDisabled()"
                ng-click="vm.addView()")
                md-icon(
                    class="angular-material-icons ng-scope material-icons"
                    role="img"
                    aria-hidden="true") add

            button(
                class="md-accent md-fab md-mini md-button md-ink-ripple"
                type="button"
                aria-label="Add"
                ng-disabled="!vm.newView || !vm.newView.name"
                ng-show="vm.toShow === 'view' && !vm.savingView"
                ng-click="vm.createViewpoint()")

                md-icon(
                    class="angular-material-icons ng-scope material-icons"
                    role="img"
                    aria-hidden="true") save

            md-progress-circular.spinner(
                ng-if="vm.toShow === 'view' && vm.savingView")







